<template>
  <view class="scan-order" v-if="showPage">
    <!-- 用户卡片 -->
    <view class="header">
      <view class="base-info">
        <view class="info-name">{{userInfo.realName || userInfo.nickName}}</view>
      </view>
      <view class="vip-logo">
        <image src="./../../static/vip-logo.png"></image>
        锦欣会员
      </view>
    </view>
    <!-- 权益卡片 -->
    <view class="card">
      <view class="card-container">
        <view class="card-header">
          <view>{{product.validState===1?'有效':'无效'}}</view>
          <view v-if="product.useCount===1">已使用<span>{{product.alreadyUseCount || 0}}/{{product.canUseCount || 0}}</span>次</view>
          <view v-if="product.useCount===0">不限次数</view>
        </view>
        <view class="card-detail">
          <view class="card-main">
            <image :src="product.carouselImageUrl || product.productImageUrl"></image>
          </view>
          <view>
            <view class="card-title">{{product.productName}}</view>
            <view class="card-date">
              <image src="./../../static/date.png"></image>
              有效期
              {{product.effType===0?'长期有效':''}}
              {{product.effType===1?calcTime(product.createTime,product.validDay):""}}
              {{product.effType===2?product.startTime+'至'+product.endTime:''}}
            </view>
            <view class="card-org">
              <image src="./../../static/location.png"></image>适用院区 {{product.orgName}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- tab -->
    <view class="tab">
      <view class="tab-bar">
        <view :class="[item.active?'bar-active':'']" v-for="(item,index) of tab" :key="index" @click="handleActiveTab(item)">{{item.label}}</view>
      </view>
    </view>
    <view class="tab-panel">
      <!-- 使用记录 -->
      <view class="record-panel" v-if="tabIndex===0">
        <template v-if="verificationsList.length>0 && verificationsList">
          <scroll-view>
            <template v-for="(item,index) of verificationsList">
              <view class="record-item" :key="index">
                <view class="record-main">
                  <view class="left">
                    <view>
                      <image src="./../../static/date.png"></image>{{item.createTime}}
                    </view>
                    <view>
                      <image src="./../../static/location.png"></image>{{item.orgName}}
                    </view>
                  </view>
                  <view class="right">
                    <span>{{item.verificationUserName}}</span><span>核销</span>
                  </view>
                </view>
              </view>
            </template>
          </scroll-view>
        </template>
        <template v-else>
          <view class="empty-data">
            <image src="./../../static/empty_state.png"></image>
            <view>暂无记录</view>
          </view>
        </template>
        <view class="option-bar" v-if="product.alreadyUseCount<product.canUseCount  || product.useCount===0">
          <view @click="handleShowModal(1)">核销此次权益</view>
        </view>
      </view>
      <!-- 权益详情 -->
      <view :class="[(product.validState===1 && product.alreadyUseCount<product.canUseCount || product.useCount===0)?'product-detail':'']" v-if="tabIndex===1">
        <view class="detail" v-html="productDetail.details"></view>
        <template v-if="(product.validState===1 && product.alreadyUseCount<product.canUseCount) || product.useCount===0">
          <view class="option-bar">
            <view @click="handleShowModal(1)">核销此次权益</view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      showPage: false,
      data: [],
      tab: [
        { label: '使用记录', active: true },
        { label: '权益详情', active: false },
      ],
      tabIndex: 0,
      userInfo: {},
      orderId: '',
      orgId: '',
      memberId: '',
      verificationsList: [],
      productId: '',
      product: '',
      modalContent: '',
      showOptBtn: true,
      productDetail: {}
    }
  },
  onLoad (option) {
    if (option.qywxUserInfo) {
      this.$setStorage("qywxUserInfo", option.qywxUserInfo)
    } else {
      // this.getCode()
    }

    if (option.code) {
      this.$setStorage("code", option.code)
    }
    let state = option.state
    if (state) {
      let stateJSON = state.replace('#wechat_redirect', '')
      if (stateJSON) {
        let state = JSON.parse(stateJSON)
        if (state.orgId) {
          this.$setStorage("orgId", state.orgId) //1
        }
        if (state.memberId) {
          this.$setStorage("memberId", state.memberId) //19
        }
        if (state.orderId) {
          this.$setStorage("orderId", state.orderId) // 17
        }
        if (state.type) {
          this.$setStorage("type", state.type)  // 0权益  1权益
        }
      }
    }
    if (option.orderId) {
      this.showPage = true
      let userInfo = this.$getStorageSync('userInfo')
      this.userInfo = JSON.parse(userInfo)
      this.$setStorage("orderId", option.orderId)
    } else {
      this.getUserInfo()
    }
    this.getOrderDetail()
  },
  methods: {
    // 核销探矿
    handleShowModal (type) {
      uni.showModal({
        title: '',
        content: '确认要核销此次权益吗?',
        success: (res) => {
          if (res.confirm) {
            this.verification()
          }
        }
      });
    },
    // 核销权益
    async verification () {
      try {
        this.$showLoading()
        let params = {
          productType: 0,
          verificationUserId: this.userInfo.verificationUserId,
          verificationUserPhone: this.userInfo.phone,
          verificationUserOrgId: this.$getStorageSync('orgId'),
          orderId: this.$getStorageSync('orderId'),
          verificationUserName: this.userInfo.verificationUserName
        }
        const res = await this.$Api.mxp_api('api-shop-member/shop/member/order/verification/verification', 'POST', params, true)
        this.$hideLoading()
        if (res.resp_code === 0) {
          this.getOrderDetail()
        } else {
          this.$showToast(res.resp_msg)
        }
      } catch (e) {
        console.error(e)
        this.$hideLoading()
      }
    },
    // 选中tab
    handleActiveTab (item) {
      this.tab.map(item => {
        item.active = false
      })
      item.active = true
      this.tabIndex = item.label === '使用记录' ? 0 : 1
    },
    // 查询当前登陆用户的信息 userInfo
    async getUserInfo () {
      try {
        this.$showLoading()
        let params = {
          orgId: this.$getStorageSync('orgId'),
          memberId: this.$getStorageSync('memberId'),
          code: this.$getStorageSync('code')
        }
        const res = await this.$Api.mxp_api('crm-server/jinxinMember/selectMemberCardById', 'GET', params, true)
        this.$hideLoading()
        if (res.resp_code === 0) {
          this.userInfo = res.datas || {}
          if (!this.userInfo.verificationUserId) {
            if (process.env.NODE_ENV === 'development') {
              this.showPage = true
            } else {
              uni.showModal({
                title: '',
                showCancel: false,
                content: '您的账号没有核销权限，请联系管理员',
                success: (res) => {
                  if (res.confirm) {
                    this.wxOptions('closeWindow')
                  }
                }
              });
              this.showPage = false
            }
          } else {
            this.showPage = true
          }
        } else {
          this.$showToast(res.resp_msg)
        }
      } catch (e) {
        console.error(e)
        this.$hideLoading()
      }
    },
    // 查询订单详情信息 核销列表
    async getOrderDetail () {
      try {
        this.$showLoading()
        let params = {
          id: this.$getStorageSync('orderId'),
          verificationState: 1
        }
        const res = await this.$Api.mxp_api('api-shop-member/shop/interest/user/receive/detailByid', 'GET', params, true)
        this.$hideLoading()
        if (res.resp_code === 0) {
          let data = res.datas
          let tmpList = data.verifications || []
          this.verificationsList = []
          tmpList.map(item => {
            if (item.verificationState === 1) {
              this.verificationsList.push(item)
            }
          })
          this.productDetail = data.interest
          this.product = data.interestUserReceive || {}
          this.productId = data.productId || ''
        } else {
          this.$showToast(res.resp_msg)
        }
      } catch (e) {
        console.error(e)
        this.$hideLoading()
      }
    }
  },
  onPullDownRefresh () {
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
}
</script>

<style lang="scss">
page {
  background-color: #f6fafd;
}

.scan-order {
  height: 100vh;
  .header {
    display: flex;
    padding: 32rpx 24rpx 24rpx 48rpx;
    background: #fff;
    justify-content: space-between;
    align-items: center;

    .base-info {
      display: flex;
      font-size: 20rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.9);
      flex-direction: column;
      .info-name {
        font-size: 40rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
      .info-other {
        display: flex;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        view:first-child {
          margin-right: 32rpx;
        }
      }
    }
    .vip-logo {
      image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 8rpx;
      }
      justify-content: center;
      align-items: center;
      display: flex;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffae64;
    }
  }
  .card {
    background: #fff;
    padding: 24rpx;
    .card-container {
      background: #f7f8fc;
      box-shadow: 0px 16rpx 32rpx -12rpx rgba(24, 39, 75, 0.08),
        0px 12px 16px -12px rgba(24, 39, 75, 0.12);
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      opacity: 1;
      padding: 44rpx 20rpx 58rpx 32rpx;
    }
    .card-header {
      display: flex;
      justify-content: space-between;
      view:first-child {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #de0346;
      }
      view:last-child {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.9);
        span {
          font-size: 40rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #de0346;
          padding-left: 8rpx;
          padding-right: 8rpx;
        }
      }
    }
    .card-detail {
      display: flex;
      padding-top: 32rpx;
      .card-main {
        image {
          width: 192rpx;
          height: 192rpx;
        }
        margin-right: 32rpx;
      }
      .card-title {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.9);
      }
      .card-date,
      .card-org {
        padding-top: 16rpx;
        display: flex;
        align-items: center;
        image {
          width: 24rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
        font-size: 24rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
      }
    }
  }
  .tab {
    .tab-bar {
      padding: 24rpx 22rpx;
      display: flex;
      background: #ffffff;
      opacity: 1;
      view {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.6);
        width: 50%;
        display: flex;
        justify-content: center;
        align-content: center;
        position: relative;
      }
      .bar-active {
        color: rgba(68, 116, 190, 1);
        &::after {
          width: 112rpx;
          height: 4rpx;
          background: #4474be;
          content: "";
          position: absolute;
          bottom: -22rpx;
        }
      }
    }
  }
  .tab-panel {
    .record-panel {
      .record-item {
        background: #f6fafd;
        padding: 24rpx 24rpx 0rpx 24rpx;
        .record-main {
          border-radius: 8px 8px 8px 8px;
          opacity: 1;
          background: #fff;
          display: flex;
          justify-content: space-around;
          padding: 32rpx;
        }

        .left {
          image {
            width: 24rpx;
            height: 24rpx;
            margin-right: 10rpx;
          }
          font-size: 28rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.6);
        }
        .right {
          span:first-child {
            font-size: 28rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.9);
          }
          span:last-child {
            margin-left: 8rpx;
            font-size: 28rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
          }
        }
      }
    }
    .option-bar {
      height: 142rpx;
      background: #fffefe;
      box-shadow: inset 0px 1rpx 0px 2rpx #e7e7e7;
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-top: 16rpx;
      view {
        text-align: center;
        margin: 0 48rpx;
        background: #4474be;
        border-radius: 44rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        padding: 16rpx 0;
      }
    }
    .option-bars {
      height: 142rpx;
      background: #fffefe;
      box-shadow: inset 0px 1rpx 0px 2rpx #e7e7e7;
      position: fixed;
      bottom: 0;
      width: 100%;
      padding-top: 16rpx;
      display: flex;
      justify-content: center;
      view {
        width: 319rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      view:first-child {
        border: 1rpx solid #c9cbd6;
        width: 40%;
        text-align: center;
        background: #fff;
        color: rgba(0, 0, 0, 0.9);
        border-radius: 44rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        margin-right: 32rpx;
      }
      view:last-child {
        width: 40%;
        text-align: center;
        background: #4474be;
        border-radius: 44rpx;
        font-size: 32rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .product-detail {
    padding-bottom: 142rpx;
    .detail {
      display: flex;
      justify-content: center;
    }
  }
}

.detail {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.empty-data {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 170rpx;
  image {
    width: 320rpx;
    height: 320rpx;
  }
  view {
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.4);
  }
}
</style>
